<template>
  <div>
    <el-page-header @back="backToList" content="详情页面">
    </el-page-header>
    <div class="detail">
      <div class="left">
        <img class="leftImg" :src="good.picGoods">
        <div class="top" :style="topStyle" v-show="topShow"></div>
        <div class="maskTop" @mouseenter="enterHandler" @mousemove="moveHandler" @mouseout="outHandler"></div>
      </div>
      <div class="right" v-show="rShow">
        <img class="rightImg" :style="rStyle" :src="good.picGoods">
      </div>
      <div class="detailInfo">
        <h1 class="goodsName">{{ good.goodsName }}</h1>
        <div class="store border price">￥{{good.price}}</div>
        <div class="store border discount">{{good.discount}}折</div>
        <el-tag type="success" style="position: absolute; top: 20px; right: 0;margin-left: 10px">剩余{{good.piece}}件</el-tag>
        <el-button type="primary" class="buynow" @click="buyDialog">立即购买</el-button>
        <el-dialog
            title="选择购买数量"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            :width="'230px'">
          <el-input-number :min="1" v-model="num" :max="good.piece"></el-input-number>
          <div slot="footer" style="text-align: center">
            <el-button type="primary" @click="buynow">确 定</el-button>
          </div>
        </el-dialog>
        <el-button type="primary" class="add" @click="addToShoppingCar">加入购物车</el-button>
        <div class="border desc">{{good.description}}</div>
      </div>
    </div>
    <div class="shop">
      <div class="shopName">
        <span class="linktoshop">123店铺</span>
      </div>
      <div class="info">
        <el-rate
            class="rate"
            v-model="evaluate.rate"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}">
        </el-rate>
        <button class="gotoShop" @click="gotoShop">进店逛逛</button>
      </div>
    </div>
    <div class="evaluation">
      <h1 style="margin-left: 320px">商品评价</h1>
      <div v-show="true" class="block">
        <el-timeline>
          <el-timeline-item v-for="(eva) in evaluate.userMsg" :timestamp="eva.created" placement="top">
            <el-card>
              <h4>{{ eva.username }}</h4>
              <p>{{ eva.msg }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      <el-empty v-show="false" description="还没有用户做出评价！"></el-empty>
    </div>
  </div>
</template>

<script>
export default {
  name: "productDetail",
  data() {
    return {
      good: {},
      topStyle: {transform:''},
      rStyle: {},
      topShow : false,
      rShow: false,
      dialogVisible: false,
      num: 1,
      evaluate: {
        rate:0,
        userMsg: []
      }
    }
  },
  methods: {
    backToList(){
      this.$router.back()
    },
    buynow(){
      this.$set(this.good, "num", this.num)
      this.$router.push({
        name: 'Settlement',
        params: {
          good: this.good
        }
      })
    },
    addToShoppingCar(){
      if(sessionStorage.getItem("userInfo")){
        if(this.good.piece > 0){
          this.$bus.$emit('addProductToCar', this.good)
          this.$message.success("添加成功")
        }else{
          this.$message.error("本商品已无库存！")
        }
      }else{
        this.$message.error("请先登录！！！")
      }
    },
    enterHandler(){
      this.topShow = true
      this.rShow = true
    },
    moveHandler(event){
      let x = event.offsetX
      let y = event.offsetY
      let topX = (x-100)<0 ? 0:(x-100)
      let topY = (y-100)<0 ? 0:(y-100)
      if(topX > 200)
        topX = 200
      if(topY > 200)
        topY = 200
      this.topStyle.transform = `translate(${topX}px,${topY}px)`
      this.rStyle.transform = `translate(-${2*topX}px, -${2*topY}px)`
    },
    outHandler(){
      this.topShow = false
      this.rShow = false
    },
    gotoShop() {
      const shopId = this.good.belongId
      let shopName = ''
      this.$axios.get(`/getShopDetail/${shopId}`)
          .then(res => {
            shopName = res.data.data.shopName
            this.$router.push({
              name: 'ShopDetail',
              params: {
                shopId: shopId,
                shopName: shopName
              }
            })
          })

    },
    getGood(goodId){
      this.$axios.get(`/good/${goodId}`)
          .then(res => {
            this.good = res.data.data
            this.good.picGoods = "data:image/jpeg;base64,"+this.good.picGoods
            this.getUserEvaluate()
          })
    },
    buyDialog(){
      if(sessionStorage.getItem("userInfo")){
        if(this.good.piece > 0){
          this.dialogVisible = true
        }else{
          this.$message.error("本商品已无库存！")
        }
      }else{
        this.$message.error("请先登录！！！")
      }
    },
    getUserEvaluate(){
      this.$axios.get(`/getEvaluate/${this.good.id}`)
          .then(res => {
            this.evaluate.rate = res.data.data.rate
            this.evaluate.userMsg = res.data.data.userMsg
            this.evaluate.userMsg.forEach(msg => {
              msg.created = msg.created.replace('T', ' ')
            })
          })
    },
    getShopDetail(){
      this.$axios.get(`/getShopDetail/${this.$route.params.shopId}`)
          .then(res => {
            this.shopName = res.data.data.shopName
            this.rate = res.data.data.rate

          })
    }
  },
  created() {
    this.getGood(this.$route.query.goodId)
  }
}
</script>

<style scoped>
.detail{
  margin: 40px 0;
  width: 100%;
  height: 400px;
  /*border: 1px solid red;*/
}
.detailInfo{
  margin-left: 60px;
  width: 200px;
  position: absolute;
  top: 130px;
  left: 550px;
}
img{
  width: 400px;
  /*float: left;*/
}
.store{
  display: inline-block;
}
.border{
  padding: 10px 20px;
  background-color: #F5F7FA;
  border: 1px solid gainsboro;
}
.price{
  border-radius: 5px 0 0 5px;
  color: red;
  font-size: 30px;
}
.discount{
  border-radius: 0 5px 5px 0;
  color: blue;
  font-size: 30px;
}
.desc{
  position: relative;
  top: -55px;
  margin: 0;
  border-radius: 5px;
  width: 460px;
  height: 222px;
  overflow: auto;
  color: #787878;
}
.buynow{
  position: relative;
  left: 215px;
  top: -60px;
}
.add{
  position: relative;
  left: 320px;
  top: -100px;
}
.left{
  position: relative;
  width: 400px;
  height: 400px;
  display: inline-block;
  float: left;
}
.leftImg{
  width: 400px;
}
.top{
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: #e93d7e;
  opacity: 0.4;
  top: 0;
  left: 0;
}
.maskTop{
  width: 400px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
}
.right{
  width: 400px;
  height: 400px;
  position: relative;
  float: left;
  display: inline-block;
  left: 50px;
  overflow: hidden;
  z-index: 2;
}
.rightImg{
  width: 800px;
  height: 800px;
  position: absolute;
  top: 0;
  left: 0;
}
.shop{
  /*border: 1px solid red;*/
  width: 200px;
  height: 150px;
  display: inline-block;
}
.shopName{
  background-color: #FAFAFA;
  border: 1px solid #E5E5E5;
  border-right: none;
  height: 50px;
  text-align: center;
  line-height: 50px;
}
.info{
  border: 1px solid #E5E5E5;
  border-top: none;
  border-right: none;
  height: 100px;
  text-align: center;
}
.rate{
  padding-top: 20px;
  padding-bottom: 15px;
}
.gotoShop{
  width: 100px;
  height: 30px;
  background-color: black;
  color: white;
  cursor: pointer;
}
.evaluation{
  display: inline-block;
  position: absolute;
  width: 750px;
  right: 150px;
  border: 1px solid #E5E5E5;
}
.block{
  margin-right: 20px;
}
</style>